<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Expenses-total</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="format-detection" content="email=no,address=no,telephone=no" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />
	<script type="text/javascript" src="../js/zepto.min.js"></script>
	<script type="text/javascript" src="../js/mediaFize.js"></script>
	<script type="text/javascript" src="../js/util.js"></script>
	<script type="text/javascript" src="../js/swiper-3.4.0.min.js"></script>
	<script type="text/javascript" src="../js/weui.min.js"></script>
	<script type="text/javascript" src="../js/echarts.js"></script>
	<script type="text/javascript" src="../js/timer.js"></script>
	<link type="text/css" rel="stylesheet" href="../css/home.css" />
	<link type="text/css" rel="stylesheet" href="../css/swiper-3.4.0.min.css" />
	<link type="text/css" rel="stylesheet" href="../css/weui.min.css" />
	<style>
		#pageSwaper{
			padding-bottom: 0.9rem;
		}
		#main{
			overflow: hidden;
		}
		#youMain{
			overflow: hidden;
		}
		#main>div{
			margin-left:3% !important ;
		}
		#youMain>div{
			margin-left:3% !important ;
		}
	</style>
</head>
<body>
<div id="pageSwaper">
	<div class="total_sum_bg">
		<div id="main"></div>
		<div id="youMain"></div>
	</div>
</div>
<script>
	$(function(){
		$(".user_footer>ul>li").eq(1).find("a").addClass("active");
		$(".user_footer>ul>li").on("click",function(){
			var index=$(this).index();
			if(index==0){
				window.location.href="index.html";
			}
		})
		var minWidth=$(window).width();
		var minHeigth=$(window).height();
		$("#main").css({"width":minWidth,"height":minHeigth/2+"%"});
		$("#youMain").css({"width":minWidth,"height":minHeigth/1.5+"%"});
		var i=0;
		var colors=['#393939','#f5b031','#fad797','#59ccf7','#c3b4df'];
		var myChart = echarts.init(document.getElementById('main'));
		myChart.setOption({
			title: {
				text: '每个人目前为止的消费'
			},
			tooltip: {},
			legend: {
				data:[]
			},
			xAxis: {
				data:[]
			},
			yAxis: {},
			series: [
				{
					name: '',
					type: 'bar',
					itemStyle:{
						normal:{
							color:function(){
								return colors[i++];
							},
							label : {
								show : false
							},
							labelLine : {
								show : false
							}
						},
						emphasis : {
							label : {
								show : true,
								position : 'center',
								textStyle : {
									fontSize : '20',
									fontWeight : 'bold'
								}
							}
						}
					},
					data: [],
					markPoint : {
						data : [
							{type : 'max', name: '最大值'},
							{type : 'min', name: '最小值'}
						]
					},
					markLine : {
						data : [
							{type : 'average', name: '平均值'}
						]
					}
				},

			]
		});
		myChart.showLoading();
		var names=[];    //名字数组（实际用来盛放X轴坐标值）
		var moneys=[];  //金钱数组（实际用来盛放Y坐标值）
		//加载数据
		$.ajax({
			url:"./../../bill/spengRatio",
			type:'get',
			dataType:'json',
			success:function(result){
				if(result.code==1){
					for(var i=0;i<result.data.length;i++){
						names.push(result.data[i].userName);    //挨个取出名字并填入类别数组
					}
					for(var i=0;i<result.data.length;i++){
						moneys.push(result.data[i].money);    //挨个取出金额并填入销量数组
					}
				}
				console.info(names);
				console.info(moneys);
				myChart.hideLoading();    //隐藏加载动画
				myChart.setOption({        //加载数据图表
					xAxis: {
						data: names
					},
					series: [{
						data: moneys
					}]
				});

			},
			error:function(){
				alert("数据加载失败！请检查数据链接是否正确");
				myChart.hideLoading();
			}
		});

		var youChart = echarts.init(document.getElementById('youMain'));
		youChart.setOption({
			title: {
				text: '另附：消费类型比例'
			},
			series : [
				{
					name: '',
					type: 'pie',
					radius: '50%',
					data:[
//						{value:22, name:'买菜'},
//						{value:7, name:'饮料'},
//						{value:2, name:'聚餐吃饭'},
//						{value:3, name:'生活用品'},
//						{value:4, name:'电费'},
//						{value:5, name:'水费'},
//						{value:1, name:'外卖'},
//						{value:1, name:'其他'},
					]
				}
			]
		});
		var arr=[];  //数组
		//加载数据
		$.ajax({
			url:"./../../bill/billTypeRatio",
			type:'get',
			dataType:'json',
			success:function(result){
				if(result.code==1){
					for(var i=0;i<result.data.length;i++){
						arr.push({value:result.data[i].typeMoney,name:result.data[i].billTypeName});    //挨个取出名字并填入类别数组
					}
				}
				youChart.hideLoading();    //隐藏加载动画
				youChart.setOption({        //加载数据图表
					series: [{
						name: '',
						type: 'pie',
						radius: '50%',
						data: arr
					}]
				});

			},
			error:function(){
				alert("数据加载失败！请检查数据链接是否正确");
				youChart.hideLoading();
			}
		});
	});
</script>
</body>
</html>
